<template>
  <div class="selector-input">
    <input type="text" class="input" ref="inputValue" :value="value" @input="searchOptions($event)" @focus="searchOptions($event)" @blur="setValue(value)" :placeholder="placeholder" />
    <span class="iconfont icon-arrow-down"></span>
  </div>
</template>

<script>
export default {
  name: "SelectorInput",
  props: {
    placeholder: {
      type: String,
      default: "请选择",
    },
    value: String,
  },
  methods: {
    searchOptions(e) {
      this.$emit("searchOptions", e.target.value)
    },

    setValue(value) {
      const _input = this.$refs.inputValue
      if (_input.value.length > 0) {
        _input.value = value
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.selector-input {
  position: relative;
  width: 100%;
  height: 38px;

  .input {
    width: 100%;
    height: 100%;
    padding: 0 15px;
    box-sizing: border-box;
    background-color: #fff;
    border: 1px solid #999;
    border-radius: 5px;
    outline: none;
    transition: all 0.2s linear;

    &:focus {
      border-color: #1890ff;
      box-shadow: 0 0 3px #1890ff;
    }
  }

  .placeholder,
  .iconfont {
    position: absolute;
  }

  .placeholder {
    left: 15px;
    top: 8px;
    color: #999;
  }

  .iconfont {
    right: 15px;
    top: 12px;
    color: #999;

    &.icon-search {
      font-size: 22px;
      top: 8px;
    }
  }
}
</style>
